import { add, edit, getTodoLists } from '@/services/todo';
import { PlusOutlined } from '@ant-design/icons';
import { PageContainer, ProForm, ProFormText, ProTable } from '@ant-design/pro-components';
import { Alert, Button, Modal, message } from 'antd';
import { useState } from 'react';


// 模拟数据
// 约定状态： state 0 待办 1 完成 2 取消
const Todo = (props: any) => {

    const state = [
        <Alert message='待办' type='info' showIcon></Alert>,
        <Alert message='完成' type='success' showIcon></Alert>,
        <Alert message='取消' type='error' showIcon></Alert>
    ]
    const changeState = async (id: any, state: number) => {
        // 调用service中的方法，修改状态
        await edit({ id, state }).then((res) => {
            getTodoLists()
        })
        // 判断结果
    }
    const columns: any = [
        {
            title: 'ID',
            dataIndex: 'id',
        },
        {
            title: '标题',
            dataIndex: 'title',
        },
        {
            title: '状态',
            dataIndex: 'state',
            // valueEnum: {
            //     0: {
            //         text: '待办',
            //         status: 'Error',
            //     },
            //     1: {
            //         text: '完成',
            //         status: 'Success',
            //     },
            //     2: {
            //         text: '取消',
            //         status: 'Processing',
            //     },
            // }
            render: (text: string, record: any) => {
                // console.log(text);
                // console.log(record);
                return state[record.state]
                // return state[text]
            }
        },
        {
            title: '修改状态',
            render: (_: any, record: any) => {
                const editOperation: any = []
                if (record.state !== 0) editOperation.push(<a onClick={() => { changeState(record.id, 0) }} key={0}>待办 </a>)
                if (record.state !== 1) editOperation.push(<a onClick={() => { changeState(record.id, 1) }} key={1}>完成 </a>)
                if (record.state !== 2) editOperation.push(<a onClick={() => { changeState(record.id, 2) }} key={2}>取消 </a>)
                return editOperation
            }
        },
    ]

    const [isModalOpen, setIsModalOpen] = useState(false);

    const showModal = () => {
        setIsModalOpen(true);
    };

    const handleOk = () => {
        setIsModalOpen(false);
    };

    const handleCancel = () => {
        setIsModalOpen(false);
    };

    // 表单提交方法
    const handleForm = async (value: any) => {
        // 添加数据
        const res = await add(value)
        if (res.state === 201) {
            // 刷新列表
            await getTodoLists()
            message.success('添加成功')
        } else {
            message.error('添加失败')
        }
    }
    return (
        <PageContainer>
            <ProTable
                rowKey="id"
                columns={columns}
                search={false}
                dateFormatter="string"
                headerTitle="待办列表"
                toolBarRender={() => [
                    <Button type="primary" key="primary" icon={<PlusOutlined />} onClick={showModal}>
                        新建
                    </Button>,
                ]}
                request={getTodoLists}

            />
            <Modal title='添加待办事项' open={isModalOpen} onOk={handleOk} onCancel={handleCancel} footer={null}>
                <ProForm onFinish={handleForm}>
                    <ProFormText label='待办事项' name={'todo'} rules={[{ required: true }]} />
                </ProForm>
            </Modal>
        </PageContainer>
    );
};

export default Todo;
